<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>妙味课堂-www.miaov.com</title>
<style>
body,ul,ol{margin:0;padding:0;}
li{ list-style:none;}
img{ border:none; vertical-align:top; }
#box{width:470px;height:150px; position:relative; margin:30px auto; overflow:hidden;}
ul{ width:470px; position:absolute;left:0; top:0; z-index:1;}
ul li{width:470px; position:absolute; left:0; top:0;}
ol{z-index:2; width:120px; position:absolute;right:10px; bottom:10px;}
ol li{ width:20px;height:20px; float:left;margin:0 2px; display:inline; background:#fff; color:#f60; line-height:20px; text-align:center;}
ol .active{ background:#f60; color:#fff;}
</style>
<script src="/Public/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/Public/js/move.js"></script>
<script>
/*
window.onload = function(){
	var oUl = document.getElementsByTagName('ul')[0];
	var aLiUl = oUl.getElementsByTagName('li');
	
	var iNum = Math.round(470/5);
	
	for(var i=0;i<aLiUl.length;i++){
		aLiUl[i].style.left = i*iNum + 'px';
	}
	
	for(var i=0;i<aLiUl.length;i++){
		aLiUl[i].index = i;
		aLiUl[i].onmouseover = function(){
			
			for(var i=0;i<aLiUl.length;i++){
				if( i <= this.index ){
					startMove( aLiUl[i] , { left : i*30 } );
				}else{
					startMove( aLiUl[i] , { left : 470 - 120 + (i-1)*30 } );
				}
			}
			
		};
		
		aLiUl[i].onmouseout = function(){
			for(var i=0;i<aLiUl.length;i++){
				startMove(aLiUl[i] , { left : i*iNum });
			}
		};
		
	}	
};
*/

$(document).ready(function(){
	var ul = $("#box").find("ul");
	var uli = ul.find("li");
	var iWidth = uli.width();
	var space_width = 30;
	var iNum = Math.round(iWidth/uli.length); 
	//初始化界面
	uli.each(function(i){
		if(i > 0){
			var left = iWidth - (uli.length-1)*space_width + (i-1)*space_width + "px";
			uli.eq(i).css("left",left);
		}
	});
	
	uli.mouseover(function(){
		var index= uli.index($(this));
		for(var i = 0;i < uli.length;i++){
			if(i <= index){
				startMove( uli.eq(i)[0] , { left : i*space_width } );
			}else{
				startMove( uli.eq(i)[0] , { left : iWidth - (uli.length-1)*space_width + (i-1)*space_width } );
			}
		}
	})
	
	uli.mouseout(function(){
		for(var i = 0;i < uli.length;i++){
			startMove( uli.eq(i)[0] , { left : i*iNum } );
		}
	});
	
	
})





</script>
</head>
<body>
<div id="box">
	<ul>
    	<li><img src="/Public/images/1.jpg" alt=""/></li>
        <li><img src="/Public/images/2.jpg" alt=""/></li>
        <li><img src="/Public/images/3.jpg" alt=""/></li>
        <li><img src="/Public/images/4.jpg" alt=""/></li>
        <li><img src="/Public/images/5.jpg" alt=""/></li>
    </ul>
</div>
</body>
</html>